<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩管理系统</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .control-panel {
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            display: inline-block;
            width: 80px;
        }
        input {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        button.delete {
            background-color: #f44336;
        }
        button.delete:hover {
            background-color: #d32f2f;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        th:hover {
            background-color: #45a049;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            border-radius: 8px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover {
            color: black;
        }
    </style>
</head>
<body>
    <h1>学生成绩管理系统</h1>
    
    <div class="control-panel">
        <h2>添加学生</h2>
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" placeholder="学生姓名">
        </div>
        <div class="form-group">
            <label for="math">数学:</label>
            <input type="number" id="math" placeholder="数学成绩" min="0" max="100">
        </div>
        <div class="form-group">
            <label for="english">英语:</label>
            <input type="number" id="english" placeholder="英语成绩" min="0" max="100">
        </div>
        <button id="add-btn">添加学生</button>
    </div>
    
    <table id="student-table">
        <thead>
            <tr>
                <th onclick="sortStudents('id')">ID</th>
                <th onclick="sortStudents('name')">姓名</th>
                <th onclick="sortStudents('math')">数学</th>
                <th onclick="sortStudents('english')">英语</th>
                <th onclick="sortStudents('average')">平均分</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="student-list">
            <!-- 学生数据将在这里动态生成 -->
        </tbody>
    </table>
    
    <!-- 学生详情弹窗 -->
    <div id="student-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modal-title">学生详情</h2>
            <p><strong>ID:</strong> <span id="modal-id"></span></p>
            <p><strong>姓名:</strong> <span id="modal-name"></span></p>
            <p><strong>数学成绩:</strong> <span id="modal-math"></span></p>
            <p><strong>英语成绩:</strong> <span id="modal-english"></span></p>
            <p><strong>平均分:</strong> <span id="modal-average"></span></p>
        </div>
    </div>
    
    <script>
        // 学生数据
        const students = [
            { id: 1, name: "张三", math: 90, english: 85 },
            { id: 2, name: "李四", math: 78, english: 92 }
        ];
        
        // 当前排序字段和方向
        let sortField = 'id';
        let sortDirection = 'asc';
        
        // 页面加载时渲染学生列表
        document.addEventListener('DOMContentLoaded', function() {
            renderStudentList();
            
            // 添加学生按钮事件
            document.getElementById('add-btn').addEventListener('click', addStudent);
            
            // 关闭弹窗事件
            document.querySelector('.close').addEventListener('click', function() {
                document.getElementById('student-modal').style.display = 'none';
            });
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(event) {
                if (event.target == document.getElementById('student-modal')) {
                    document.getElementById('student-modal').style.display = 'none';
                }
            });
        });
        
        // 渲染学生列表
        function renderStudentList() {
            const tbody = document.getElementById('student-list');
            tbody.innerHTML = '';
            
            // 计算平均分并排序
            const sortedStudents = students.map(student => ({
                ...student,
                average: calculateAverage(student.math, student.english)
            })).sort((a, b) => {
                if (a[sortField] < b[sortField]) return sortDirection === 'asc' ? -1 : 1;
                if (a[sortField] > b[sortField]) return sortDirection === 'asc' ? 1 : -1;
                return 0;
            });
            
            // 生成表格行
            sortedStudents.forEach(student => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${student.id}</td>
                    <td class="student-name" onclick="showStudentDetail(${student.id})">${student.name}</td>
                    <td>${student.math}</td>
                    <td>${student.english}</td>
                    <td>${student.average.toFixed(2)}</td>
                    <td><button class="delete" onclick="deleteStudent(${student.id})">删除</button></td>
                `;
                
                tbody.appendChild(row);
            });
        }
        
        // 计算平均分
        function calculateAverage(math, english) {
            return (math + english) / 2;
        }
        
        // 添加学生
        function addStudent() {
            const nameInput = document.getElementById('name');
            const mathInput = document.getElementById('math');
            const englishInput = document.getElementById('english');
            
            const name = nameInput.value.trim();
            const math = parseInt(mathInput.value);
            const english = parseInt(englishInput.value);
            
            if (!name || isNaN(math) || isNaN(english)) {
                alert('请填写完整的学生信息！');
                return;
            }
            
            if (math < 0 || math > 100 || english < 0 || english > 100) {
                alert('成绩必须在0-100之间！');
                return;
            }
            
            // 生成新ID
            const newId = students.length > 0 ? Math.max(...students.map(s => s.id)) + 1 : 1;
            
            // 添加新学生
            students.push({
                id: newId,
                name,
                math,
                english
            });
            
            // 清空输入框
            nameInput.value = '';
            mathInput.value = '';
            englishInput.value = '';
            
            // 重新渲染列表
            renderStudentList();
        }
        
        // 删除学生
        function deleteStudent(id) {
            if (confirm('确定要删除这个学生吗？')) {
                const index = students.findIndex(student => student.id === id);
                if (index !== -1) {
                    students.splice(index, 1);
                    renderStudentList();
                }
            }
        }
        
        // 排序学生
        function sortStudents(field) {
            if (sortField === field) {
                // 如果已经是按这个字段排序，则切换方向
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                // 否则设置为按新字段升序排序
                sortField = field;
                sortDirection = 'asc';
            }
            renderStudentList();
        }
        
        // 显示学生详情
        function showStudentDetail(id) {
            const student = students.find(s => s.id === id);
            if (student) {
                const average = calculateAverage(student.math, student.english);
                
                document.getElementById('modal-id').textContent = student.id;
                document.getElementById('modal-name').textContent = student.name;
                document.getElementById('modal-math').textContent = student.math;
                document.getElementById('modal-english').textContent = student.english;
                document.getElementById('modal-average').textContent = average.toFixed(2);
                
                document.getElementById('student-modal').style.display = 'block';
            }
        }
    </script>
</body>
</html>